<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default m-b-n-xs" style="border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >
        <div class="m-t-xs m-t-sm">
          <span>设备档案</span>
          <i class="fa fa-angle-right"></i>
          <span>维保工单</span>
        </div>
      </div>
    </div>
  </div>
  <div class="wrapper-sm">
    <div class="panel panel-default m-t-n-xs m-b-n-xs" style="border-radius:5px;">

      <div class="panel panel-default" style="margin-bottom:-5px;border-radius:5px">
        <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >
          <form class="form-inline row ">
            <app-select (search)="oo=$event;getData()"></app-select>
          </form>

        </div>
      </div>
    </div>
  </div>

  <div class="wrapper-sm" style="font-size:12px">
    <div class="panel panel-default" style="border-radius:5px">
      <div class="panel-body" >
        <table  class="table table-hover table-striped m-b-none default footable " style="font-size: 12px;">
          <thead>
          <tr>
            <th  style="width:10%">工单编号</th>
            <th  style="width:10%">设备编号</th>
            <th  style="width:10%">设备名称</th>
            <th  style="width:15%">维保提醒时间</th>
            <th  style="width:15%">维保状态</th>
            <th  style="width:20%">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of data">
            <td><a style="color: blue" [routerLink]="['weibaodetail',item.id]">{{item.id}}</a></td>
            <!--<td><a style="color: blue" [routerLink]="['../deviceinfo',item.device_id.replace('/','|')]">{{item.mac}}</a></td>-->
            <td><a style="color: blue"  [routerLink]="['../../../info/deviceinfo','none']">{{item.mac}}</a></td>
            <td>{{item.device_name}}</td>
            <td>{{item.created}}</td>
            <td>
              <a style="margin-right:5px;color:#56abe4" *ngIf="item.step==1"><i class="icon iconfont icon-yijie" tooltip="{{tool.yichuliweibaoTooltip}}"></i></a>
              <a style="margin-right:5px;color:gray" *ngIf="item.step!=1"><i class="icon iconfont icon-yijie" tooltip="{{tool.yichuliweibao1Tooltip}}"></i></a>

              <a style="color:#56abe4" *ngIf="item.status==5"><i class="icon iconfont icon-yiqueren" tooltip="{{tool.huifuweibaoTooltip}}"></i></a>
              <a style="color:gray" *ngIf="item.status!=5"><i class="icon iconfont icon-yiqueren" tooltip="{{tool.huifuweibao1Tooltip}}"></i></a>

            </td>

            <td>
              <span *ngIf="item.status==5">

              <a style="margin-right:5px;color:gray;"><i class="icon iconfont icon-jiejing" tooltip="{{tool.chuliweibaoTooltip}}" style="font-size:18px"></i></a>

              <a><i class="icon iconfont icon-quxiao" style="margin-right:5px;color:gray;font-size:18px" tooltip="{{tool.chexiaoweibaoTooltip}}" ></i></a>

              <a>

              <span  class="icon iconfont icon-shanchu" style="margin-right:5px;color:#eb4f38;font-size:18px" tooltip="{{tool.shanchuweibaoTooltip}}" (click)="selectedId=item.id;buttonType=2;myModal.show()">
              </span>
              </a>
              </span>
              <span *ngIf="item.status!=5 ">
              <a style="margin-right:5px;color:#11cd6e;" [routerLink]="['querenweibao',item.id]" *ngIf="item.status<2" ><i class="icon iconfont icon-jiejing" tooltip="{{tool.chuliweibaoTooltip}}" style="font-size:18px"></i></a>

              <a style="margin-right:5px;color:gray;" *ngIf="item.status>=2"><i class="icon iconfont icon-jiejing" tooltip="{{tool.chuliweibaoTooltip}}" style="font-size:18px"></i></a>


              <a *ngIf="item.status!=3 ">
                 <span  class="icon iconfont icon-quxiao" style="margin-right:5px;color:#f4c600;font-size:18px" tooltip="{{tool.chexiaoweibaoTooltip}}" (click)="selectedId=item.id;buttonType=1;myModal.show()">
                 </span>
              </a>

              <a  *ngIf="item.status==3"><i class="icon iconfont icon-quxiao" style="margin-right:5px;color:gray;font-size:18px" tooltip="{{tool.chexiaoweibaoTooltip}}" ></i>
              </a>

              <a>
              <span  class="icon iconfont icon-shanchu" style="margin-right:5px;color:#eb4f38;font-size:18px" tooltip="{{tool.shanchuweibaoTooltip}}" (click)="selectedId=item.id;buttonType=2;myModal.show()">
              </span>
              </a>
              </span>

            </td>
          </tr>
          </tbody>
        </table>


        <app-pagination [pageModel]="pageModel" (pageChanged)="page=$event;getData()"></app-pagination>

      </div>
    </div>
  </div>
</div>


<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">
            <p *ngIf="buttonType==1">撤销维保工单</p>
            <p *ngIf="buttonType==2">删除维保工单</p>
          </h3>
        </div>
        <div class="modal-body">
          <div class="row">

            <alert type="warning" *ngIf="buttonType==1">
              <h4>确定要撤销工单<strong>{{ item?.id }}</strong>吗？<br/><br/>
                如果点击 撤銷按钮 后，该条工单记录将会被撤销，不再作任何操作</h4>
            </alert>

            <alert type="danger" *ngIf="buttonType==2">
              <h4>确定要删除工单<strong>{{ item?.id }}</strong>吗？<br/><br/>
                如果点击 删除按钮 后，将会把该条维保工单记录删除</h4>
            </alert>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-warning" *ngIf="buttonType==1" (click)="confirmRevoke()" [disabled]="disabled">撤銷</button>
          <button class="btn btn-danger" *ngIf="buttonType==2" (click)="confirmDelete()" [disabled]="disabled">删除</button>
          <button class="btn btn-default" (click)="myModal.hide()">取消</button>
        </div>
      </div>

    </div>
  </div>
</div>

